<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自定义看板002</title>
</head>
<style>
    /* 清楚默认布局  *清楚所有 */
    *{  
        margin: 0;
        padding: 0;
    }
    div{
        /* 盒子模型改为边框盒子 */
        box-sizing: border-box;
        font-size: 26px;
        color: red;
        /* 加粗 */
        font-weight: 700;
        text-align: center;
        /* 斜体 */
        font-style: italic;
    }
    .main{
        /* border: 1px solid green; */
        /* 设置页面宽高为视口宽高 */
        /* vw，vh是相对单位 相对于浏览器的视口宽高 */
        width: 100vw;
        height: 100vh;
    }
    .header{
        /* border: 1px solid red; */
        background-color: #F6ACA3;
        /* 它的父元素main的100% */
        width: 100%;
        height: 10%;
        color: white;
        /* 字体大小 */
        /* font-size: 50px; */
        /* 字体大小响应式 */
        font-size: 5vh;
        /* js处理 弹性适配 */
        /* 最小12px，适中5vh,最大48px */
        /* font-size: clamp(12px,5vh,48px); */
    }
    .text{
        /* 垂直居中 */
        /* line-height: 10%; */
        /* vertical-align: middle; */
        /* 使用paddding调节 */
        /* padding-top: 2px; */
        /* 使用布局调节 flex布局 */
        display: flex;
        /* flex布局 元素垂直居中 */
        align-items: center;
        /* flex布局 元素水平居中 */
        justify-content: center;
    }
    .content{
        /* border: 1px solid red; */
        width: 100%;
        height: 85%;
    }
    .contentleft,.contentright{
        /* border: 1px solid blue; */
        /* display: inline-block; */
        height: 100%;
    }
    .contentleft{
        background-color: rgba(139, 243, 208, 0.834);
        width: 30%;
        /* 浮动布局-左浮动 */
        float: left;
    }
    .contentleftUp,.contentleftDown{
        height: 50%;
    }
    .contentleftUp{
        background-color: #e7f98d;
    }
    .contentright{
        background-color: bisque;
        width: 70%;
        /* 浮动布局-右浮动 */
        float: right;
    }
    .contentrightUpleft,.contentrightUpright{
        width: 50%;
        height: 100%;
    }
    .contentrightUpleft{
        float: left;
        background-color:#96e6fc;
    }
    .contentrightUpright{
        float: right;
    }
    .contentrightDownleft,.contentrightDownright{
        width: 50%;
        height: 100%;
    }
    .contentrightDownleft{
        float: left;
        background-color: #f774d4;
    }
    .contentrightDownright{
        float: right;
    }
    .up,.down{
        /* border: 1px solid rgb(72, 72, 132); */
        height: 50%;
    }
    .up{
        background-color: rgba(178, 105, 246, 0.64);
    }
    .down{
        background-color: azure;
    }
    .footer{
        /* border: 1px solid red; */
        background-color: #a2ef7b;
        width: 100%;
        height: 5%;
        color: rgb(58, 57, 57);
        font-size: 2vh;
        
    }
</style>
<body>
    <div class="main">
        <div class="header text">
            <!-- header -->
            环境中心检测项目--自定义看板002
        </div>
        <div class="content">
            <div class="contentleft">
                <!-- contentleft -->
                <div class="contentleftUp">
                    <!-- contentleftUp -->
                </div>
                <div class="contentleftDown">
                    <!-- contentleftDown -->
                </div>
            </div>
            <div class="contentright">
                <!-- contentright -->
                <div class="up">
                    <!-- up -->
                    <div class="contentrightUpleft">
                        <!-- contentrightUpleft -->
                    </div>
                    <div class="contentrightUpright">
                        <!-- contentrightUpright -->
                    </div>
                </div>
                <div class="down">
                    <!-- down -->
                    <div class="contentrightDownleft">
                        <!-- contentrightDownleft -->
                    </div>
                    <div class="contentrightDownright">
                        <!-- contentrightDownright -->
                    </div>
                </div>
            </div>
        </div>
        <div class="footer text">
            <!-- footer -->
            杰普软件 @ 版权所有 2025年
        </div>
    </div>
</body>
</html>